<template>
    <view id="bind-account" v-show="isLoading">
        <!-- <uni-list>
        	<uni-list-item @click="switchUser" title="切换账号" />
        </uni-list> -->
        <view class="title">账号安全</view>
        <view class="form" @click="edit('yun')">
        	<view class="form-title">云比赛账号</view>
        	<input class="uni-input" :class="{'input-disabled':editFlag}" name="yun" :disabled="editFlag" maxlength="30" :value="yun" placeholder="绑定云比赛账号" />
            <view class="form-action" ><uni-icons type="arrowright" color="#bbbbbb" size="20" /></view>
        </view>
        <view class="form" @click="edit('phone')">
        	<view class="form-title">手机号</view>
        	<input class="uni-input" :class="{'input-disabled':editFlag}" name="phone" :disabled="editFlag" maxlength="11" :value="phone" placeholder="绑定手机号" />
            <view class="form-action" ><uni-icons type="arrowright"  color="#bbbbbb" size="20" /></view>
        </view>
        <view>
            <button @click="exit" class="exitBtn" :plain="true" >退出登录</button>
        </view>
    </view>
</template>
<script>
    import uniIcons from '@/components/uni-icons/uni-icons.vue'
    import uniList from "@/components/uni-list/uni-list.vue"
    import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
    import {getOrgInfo} from "@/common/api.js"
    export default {
        components: {
            uniIcons,uniList,uniListItem
        },
        data() {
            return {
                phone: "",
                yun: '',
                editFlag:true,
                isLoading:false,
                navigateFlag:false,
                power:false,
                selectedUnder:''
            }
        },
        methods: {
            edit(type){
                if (this.navigateFlag) {
                    return;
                }
                this.navigateFlag = true;
                if(this.power){
                    uni.navigateTo({
                        url: `/pages/home/personalSettings/bindAccount?type=${type}`
                    })
                }else{
                    uni.showToast({
                    	icon: 'none',
                    	title:'暂无权限'
                    });
                }

                setTimeout(() => {
                    this.navigateFlag = false;
                }, 200)
            },
            switchUser(){
                uni.navigateTo({
                    url: `/pages/home/personalSettings/switchAccount`
                })
            },
            exit(){
                let temp = uni.getStorageSync('_underKey_')
                uni.clearStorageSync();
                uni.setStorageSync('_underKey_',temp);
                uni.reLaunch({
                    url:'/pages/home/welcome'
                })
            },
            getData(){
                let p=getOrgInfo().then((res)=>{
                    const data = res.data
                    if(data.errcode==0){
                        this.phone = data.data.link_phone;
                        this.yun = data.data.loginEmail;
                    }else if(data.errcode==1000 || data.errcode==1001){
                        uni.removeStorageSync('token');
                        uni.reLaunch({
                            url:'/pages/home/welcome'
                        })
                    }else{
                        uni.showToast({
                        	position: 'center',
                        	icon: 'none',
                        	title:data.msg
                        });
                    }
                })
                return p;
            }
        },
        onShow() {
            uni.showLoading({
                title: '加载中'
            });
			this.power = uni.getStorageSync('_personalSettings_') >>0;
            let init = async ()=>{
                await this.getData();
                uni.hideLoading()
                this.isLoading=true;
            }
            init()
            // this.getData()
            // setTimeout(()=>{
            //     uni.hideLoading()
            //     this.isLoading=true;
            // },500)
        }
    }
</script>

<style lang="scss">
    page{
        padding-top: 30rpx;
    }
    #bind-account {
        position: relative;
        .title{
            padding-top: 16rpx;
            padding-left: 30rpx;
            padding-bottom: 16rpx;
            font-size: 28rpx;
            font-weight: bold;
            background: #fff;
            margin-top: 20rpx;
        }
        .form{
            display: flex;
            // flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            background: #fff;
            .form-title{
                padding: 20rpx;
                padding-left: 30rpx;
                width: 150rpx;
            }
            .form-action{
                padding: 10rpx 30rpx;
            }
            .input-disabled{
                color: #bbb;
            }
        }
        .exitBtn{
            font-size: 32rpx;
            // margin: 10px;
            border: none;
            background: #fff;
            color: #FF5E5E;
            margin-top: 40rpx;
        }
    }
</style>
